:root {
    --theme-accent:rgba(255,80,47,1);
    --theme-primary:#004d61;
    --theme-primary-lighter:#d2eaf0;
    --theme-primary-light:rgba(52,132,152,1);
    --color-white:#FFFFFF;
    --color-black:#212121;
    --color-grey:#757575;
    --color-divider:#BDBDBD;
    --color-bg-white:#efefef;

    --font-size-title-big:2em;
    --font-size-title:1.6em;
    --font-size-body:1em;
    --font-size-hint:0.8em;
}

*{
    margin: 0;
    padding: 0;
    font-family: 'Microsoft Yahei';
}

input {
    outline-style: none ;
    border: 1px solid #ccc; 
    border-radius: 5px;
    padding: 7px 10px;
}

input:focus{
    border-color: var(--theme-primary);
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}

button {
    border-width: 0px;
    border-radius: 100px;
    padding: 10px;
    padding-left: 25px;
    padding-right: 25px;
    background: var(--theme-accent);
    color: var(--color-white);
    cursor: pointer; 
    outline: none;
    font-size: var(--font-size-body); 
    letter-spacing: 2px;
}

button:hover{
    border-color: var(--theme-primary);
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)

}


table caption{
    margin-bottom: 10px;
    font-size: var(--font-size-body);
    font-weight: bold;
    text-align: left;
}

th,td{
    border: 1px solid var(--color-divider);
    text-align: center;
    padding:5px;
}

table thead tr{
    background-color: var(--theme-primary-light);
    color: #fff;
}

table tbody tr:nth-child(odd){
    background-color: #eee;
}

table tbody tr:hover{
    background-color: #ccc;
}

table tbody tr td:first-child{
    color: var(--theme-accent);
}

table tfoot tr td{
    text-align: right;
    padding-right: 20px;
}

#header{
    position: absolute;
    top: 0;
    height: 40px;
    width: 100%;
    padding: 10px;
    background:var(--theme-primary);
    font-size: var(--font-size-body);
    color: var(--color-white);
}

#main{
    position: absolute;
    width: 100%;
    top:40px;
    bottom: 40px;
    /* overflow: auto; */
    background:var(--color-bg-white);
}

#footer{
    position: absolute;
    height: 40px;
    width: 100%;
    padding: 10px;
    bottom: 0;
    background: var(--theme-primary);
    font-size: var(--font-size-hint);
    text-align: center;
    color: var(--color-white);
    /* color: white; */
}

#leftBox {
    position: absolute;
  height: 100%;
  width: 200px;
  float: left;
  background-color: var(--theme-primary-lighter);
}

#leftBox > button:first-child{
    margin-top: 20px;
}

#rightBox {
    position: absolute;
    width: calc(100% - 200px);
  height: 100%;
  left:200px;
}

.label{
    display: block;
    width: 150px;
    margin: 0 auto;
    color: var(--color-black);
    background-color: var(--color-bg-white);
}

.label:hover{
    color: var(--color-white);
    background-color: var(--theme-accent);
}